<template>
	<!-- 学习课程 -->
	<scroll-view class="content" scroll-y="true" :scroll-into-view="scrollIntoViewId">
		<!-- 图文课程 -->
		<view class="tuwenBox" id="item1" v-if="type=='图文'">
			<view class="info">
				<mp-html :content="content.content" />
			</view>
			<!-- <text class="title">{{content.name}}</text> -->
		</view>
		<!-- 视频课程 -->
		<view class="videoBox" id="item1" v-else-if="type=='视频'">
			<video :poster="content.cover" class="video" :src="content.content" controls
				@loadedmetadata="onLoadedMetadata"></video>
			<text class="title">{{content.name}}</text>
			<view class="typeBox">
				<view class="typeBoxInner">
					视频
				</view>
				<text class="courseTime">{{content.duration}}</text>
			</view>
			<image :src="baseUrl+'describe.png'" class="describeImg" />
			<!-- 章节介绍 -->
			<view class="chapterIntroduction">
				<view class="titleBox">
					<view class="dot">
					</view>
					<view class="titleLabel">
						章节介绍
					</view>
				</view>
				<text class="introduction">{{data.catalogue_list[index].synopsis}}</text>
			</view>
			<!-- 导师履历 -->
			<view class="mentorResume">
				<view class="titleBox">
					<view class="dot">
					</view>
					<view class="titleLabel">
						导师履历
					</view>
				</view>
				<view class="line">
				</view>
				<view class="mentorBox">
					<view class="mentorItem" v-for="(item,index) in data.teacher_arr" :key="index">
						<image :src="item.avatar" class="mentorAvatar" />
						<view class="right">
						<text class="mentorName">{{item.name}}</text>
						<text class="mentorDescrible">{{item.synopsis}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 章节目录 -->
			<view class="contents">
				<view class="titleBox">
					<view class="dot">
					</view>
					<view class="titleLabel">
						章节目录
					</view>
				</view>
				<view class="line">
				</view>
				<view class="contentsBox">
					<view class="contentsItem" v-for="(item,index) in data.catalogue_list" :key="index"
						@click="study(index)">
						<view class="contentsTitleBox">
							<text class="contentsTitle">{{index+1}} . {{item.name}}</text>
						</view>
						<view class="typeBox">
							<view class="typeBoxInner">
								视频
							</view>
							<text class="courseTime">{{item.duration}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 学员评价 -->
			<view class="studentEvaluate">
				<view class="titleBox">
					<view class="dot">
					</view>
					<view class="titleLabel">
						学员评价（{{studentEvaluateNum}}）
					</view>
					<!-- <text class="all">全部 ></text> -->
				</view>
				<view class="line">
				</view>
				<view class="evaluateBox">
					<view class="evaluateItem" v-for="(item,index) in data.comment" :key="index">
						<view class="topBox">
							<image :src="item.avatar" class="avatar" />
							</image>
							<text class="name">{{item.nickname}}</text>
						</view>
						<view class="centerBox">
							<uni-rate :readonly="true" :value="item.course_score" :size="20" activeColor="#ee822a" />
							<text class="time">{{item.create_time}}</text>
						</view>
						<text class="info">{{item.comment}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 音频课程 -->
		<view class="voiceBox" v-else-if="type=='音频'">
			<video :poster="content.cover" class="audio" :src="content.content" controls></video>
			<!-- <text class="title">{{content.name}}</text> -->
		</view>
	</scroll-view>
</template>

<script>
	import {
		baseURL,
		basePath
	} from '@/config/app'
	export default {
		data() {
			return {
				baseUrl: `https://cdn.zkjialan.com/img/course/`,
				type: '', //课程类型 决定显示哪个
				title: '',
				content: '',
				course_id: '', //课程id
				id: '', //目录id
				duration: '', //课程时长
				studentEvaluateNum: 86,
				data: '', //课程详情
				index: 0, //点击目录的序号
				scrollTop: 0,
				scrollIntoViewId: ''
			}
		},
		onShow() {
			let pagearr = getCurrentPages();
			let currentPage = pagearr[pagearr.length - 1];
			this.course_id = currentPage.options.course_id;
			console.log(currentPage.options.index)
			if (currentPage.options.index != 'undefined') {
				this.index = currentPage.options.index;
			}
			this.id = currentPage.options.id;
			const encodedString = currentPage.options.type;
			let decodedString = decodeURIComponent(encodedString);
			while (decodedString !== decodeURIComponent(decodedString)) {
				decodedString = decodeURIComponent(decodedString);
			}
			this.type = decodedString;
			this.$request.get(`course/course/catalogue?course_id=${this.course_id}&id=${this.id}`).then(res => {
				console.log(res.data);
				this.content = res.data.data;
				uni.setNavigationBarTitle({
					title: this.content.name
				});
			})
			//查询课程详情
			this.$request.get(`course/course/detail?id=${this.course_id}`).then(res => {
				console.log(res.data);
				this.data = res.data.data;
				this.studentEvaluateNum = this.data.comment.length;
			})
		},
		methods: {
			scroll(e) {
				console.log(e.detail)
				// this.scrollTop =e.detail.scrollTop;
			},
			study(index) {
				// setTimeout(() => {
				// 	this.scrollTop = 0;
				// }, 500)
				this.scrollIntoViewId = "item1";
				this.$request.get(
						`course/course/catalogue?course_id=${this.course_id}&id=${this.data.catalogue_list[index].id}`)
					.then(res => {
						console.log(res.data);
						this.content = res.data.data;
						uni.setNavigationBarTitle({
							title: this.content.name
						});
						this.scrollIntoViewId = "";
					})
			},
			onLoadedMetadata(e) {
				// 获取视频时长（单位：秒）
				this.duration = this.formatDurationWithChinese(e.detail.duration.toFixed(2));
			},
			formatDurationWithChinese(seconds) {
				// 确保秒数是整数
				seconds = Math.floor(seconds);
				const hours = Math.floor(seconds / 3600);
				const minutes = Math.floor((seconds % 3600) / 60);
				const secs = seconds % 60;
				// 构建格式化后的字符串
				let formattedDuration = '';
				if (hours > 0) {
					formattedDuration += `${hours}时`;
				}
				if (minutes > 0 || hours > 0) { // 如果有小时或者有分钟，显示分钟
					formattedDuration += `${minutes}分`;
				}
				formattedDuration += `${secs}秒`;
				return formattedDuration;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mentorResume {
		width: 670rpx;
		margin-top: 100rpx;
		margin-left: 40rpx;
		display: flex;
		flex-direction: column;

		.mentorBox {
			position: relative;
			width: 100%;
			// background-color: red;

			.mentorItem {
				position: relative;
				width: 100%;
				// height: 110rpx;
				margin-bottom: 50rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.mentorAvatar {
					// position: absolute;
					left: 0;
					top: 0;
					width: 110rpx;
					height: 110rpx;
					border-radius: 50%;
				}
				.right{
					width: 500rpx;
					display: flex;
					flex-direction: column;
					margin-top: 20rpx;
					margin-left: 40rpx;
					flex-wrap: wrap; 
					.mentorName {
						font-size: 28rpx;
						
					}
					.mentorDescrible {
						// position: absolute;
						position: relative;
						color: #8e8e8e;
						font-size: 24rpx;
						margin-top: 20rpx;
						// margin-left: 165rpx;
					}
				}
				
			}
		}

		.titleBox {
			position: relative;
			display: flex;
			align-items: center;

			.titleLabel {
				font-size: 34rpx;
				margin-left: 30rpx;
				font-weight: 700;
			}

			.dot {
				width: 10rpx;
				height: 10rpx;
				background-color: #f08229;
				border-radius: 50%;
			}
		}
	}

	.evaluateBox {
		width: 670rpx;

		// margin-top: 60rpx;
		.evaluateItem {
			width: 100%;
			// margin-bottom: 100rpx;

			.info {
				display: block;
				width: 100%;
				font-size: 28rpx;
				color: #414141;
				margin-top: 35rpx;
				font-weight: 500;
				word-break: break-word;
			}

			.centerBox {
				width: 100%;
				margin-top: 35rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.time {
					color: #8e8e8e;
					font-size: 22rpx;
				}
			}

			.topBox {
				width: 100%;
				height: 70rpx;
				display: flex;
				align-items: center;

				.avatar {
					width: 70rpx;
					height: 70rpx;
				}

				.name {
					font-size: 28rpx;
					margin-left: 40rpx;
					font-weight: 700;
				}
			}

		}
	}

	.all {
		position: absolute;
		right: 0%;
		color: #8e8e8e;
		font-size: 24rpx;
	}

	.contentsBox {
		width: 100%;

		// margin-left: 40rpx;
		.contentsItem {
			width: 100%;
			height: 150rpx;
			border-bottom: 1rpx dotted #8e8e8e;
			margin-bottom: 50rpx;

			.contentsTitleBox {
				font-size: 28rpx;
				font-weight: 700;
				margin-bottom: 35rpx;
			}
		}
	}



	.line {
		width: 100%;
		height: 2rpx;
		background-color: #dcdcdc;
		margin-bottom: 50rpx;
		margin-top: 50rpx;
		display: inline-block;
	}

	.chapterIntroduction,
	.studentEvaluate,
	.contents {
		width: 670rpx;
		margin-top: 100rpx;
		margin-left: 40rpx;

		.introduction {
			margin-top: 50rpx;
			font-weight: 26rpx;
			text-align: justify;
			display: block;
		}

	}

	.studentEvaluate {
		padding-bottom: 200rpx;
	}

	.describeImg {
		width: 670rpx;
		height: 182rpx;
		margin-left: 40rpx;
		margin-top: 50rpx;
	}

	.typeBox {
		margin-left: 40rpx;
		display: flex;
		align-items: center;

		.courseTime {
			margin-left: 25rpx;
			font-size: 28rpx;
		}

		.typeBoxInner {
			width: 70rpx;
			height: 40rpx;
			background-color: #f08229;
			border-radius: 10rpx;
			font-size: 22rpx;
			color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}

	.video,
	.audio {
		width: 100%;
		margin-left: 0%;
		// margin-top: 50rpx;
	}


	.title {
		width: 670rpx;
		margin-left: 40rpx;
		margin-top: 65rpx;
		margin-bottom: 45rpx;
		font-size: 52rpx;
		display: block;
		font-weight: bold;
	}

	.tuwenBox,
	.videoBox,
	.voiceBox {
		width: 100%;
		height: 100vh;
	}

	.content {
		width: 100%;
		height: 100%;
		overflow-y: auto;
		background-color: #fff;
	}
</style>